<template>
	<view class="user-area">
		<view class="bgcolor plt30 flex alcenter cl-w" style="flex-direction: column;">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<image src="@/static/logo_icon.png" mode=""
				style="width: 130rpx;height: 130rpx;border-radius: 50%;border: 1px solid #3247d3;background-color: #fff;">
			</image>
			<view class="flex alcenter mt10">
				<view class="ft17 mr10">{{member.username||'小乾进销存ERP'}}</view>
				<!-- <image src="@/static/jiantou_xia.png" mode="widthFix" style="width: 20rpx;"></image> -->
			</view>
			<view class="ft12 mt5 cl-placeholder">{{member.postText}}</view>
		</view>
		<view class="br30 col1 pd15" style="margin-top: -30rpx;background-color: #F5F5F5;">
			<view class="bg-w br30 plr15">
				<!-- <view class="flex alcenter spaceb bd-bottom plt15" @click="nav('/pages/ukey/index')">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon01.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">税务Ukey或税盘信息</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view> -->
				<!-- <view class="flex alcenter spaceb bd-bottom plt15" @click="to('/pages/user/zhanghao/loginSet')">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon02.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">账号信息</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view> -->
				<view class="flex alcenter spaceb bd-bottom plt15" @click="to('/pages/user/mynews')">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon08.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">通知消息</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view>
				<!-- <view class="flex alcenter spaceb bd-bottom plt15" @click="to('/pages/staff/listYg')">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon03.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">员工信息</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view> -->
				<view class="flex alcenter spaceb plt15" @click="to('/pages/user/hezuo')">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon04.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">商务合作</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view>
			</view>
			<view class="bg-w br30 plr15 mt15">
				<view class="flex alcenter spaceb bd-bottom plt15" @click="showpop=true">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon05.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">联系客服</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view>
				<view class="flex alcenter spaceb bd-bottom plt15" @click="to('/pages/user/about')">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon06.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">关于我们</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view>
				<!-- <view class="flex alcenter spaceb plt15" @click="to('/pages/user/bangzhu')">
					<view class="flex alcenter">
						<image src="@/static/mine/my_icon07.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="ml10">帮助说明</view>
					</view>
					<image src="@/static/jiantou_you_h.png" mode="widthFix" style="width: 12rpx;"></image>
				</view> -->
			</view>
			<view class="bg-w br30 mt15">
				<u-button type="primary" :plain="false" text="退出登录" @click="loginout"></u-button>
			</view>
		</view>
		<u-popup :show="showpop" mode="center" round="30rpx" width="500rpx" height="600rpx" @close="close" @open="open"
			closeOnClickOverlay>
			<view class="">
				<image src="https://erp.juqianshunwl.com.cn/uniapp/kefu_bg.png" mode="widthFix" style="width: 100%;"></image>
				<view class="flex column alcenter">
					<image src="../../static/wechat.png" mode="" style="width: 350rpx;height: 350rpx;"></image>
					<view class="mt10 text-center plr40 ft12">微信扫码加入小乾科技进行解答</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	// const db = uniCloud.database();

	import {
		mapState,
		mapMutations
	} from 'vuex';
	const _history = 'usemall-goods-history'
	export default {
		computed: {
			...mapState(['islogin', 'member'])
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				isreq: false,
				// 浏览历史
				historyDatas: {},
				// 统计数据
				stats: {},

				actionSheetShow: false,
				actionSheetList: [],
				actionSheetTips: {
					text: "",
					color: "#9a9a9a",
					size: 24
				},

				is_mp: false,
				is_alipay: false,
				showpop: false
			};
		},
		onLoad() {
			this.$nextTick(() => {
				this.is_mp = this.$env.is_mp;
				this.is_alipay = this.$env.platform == 'alipay';
			})
		},
		onShow() {
			let _this = this;
			// if (!this.islogin) {
			// 	this.$api.msg('账号未登录');
			// 	return;
			// }

			this.loadData();
		},
		methods: {
			...mapMutations(['logout', 'putMember']),
			// 加载数据
			loadData() {
				this.$apis.getUserData().then(res => {
					this.putMember(res.result);
					// this.randCodeImage = res.result
				})
			},

			// 打开操作菜单
			openActionSheet() {
				this.actionSheetShow = true;

				this.$api.timerout(() => {
					this.actionSheetList = [{
						text: "退出登录",
						color: "#333"
					}, {
						text: "切换账号",
						color: "#333"
					}, ];

				}, 0);
			},
			// 关闭操作菜单
			actionSheetClose() {
				console.log(this.actionSheetShow);
			},
			// 点击操作菜单
			actionSheetClick(index) {
				switch (index) {
					case 0:
						this.$api.msg('退出成功');
						this.logout();
						this.$api.timerout(() => {
							this.$api.tohome();
						}, 200);
						break;
					case 1:
						this.$api.tologin();
						break;
				}
			},

			// 统一跳转接口，拦截未登录路由
			to(url) {
				// if (!this.islogin) {
				// 	this.$api.tologin()
				// 	return;
				// }

				uni.navigateTo({
					url
				});
			},
			// 跳转到 订单
			toOrder(url, state) {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}

				uni.setStorage({
					key: '__order_state',
					data: state,
					success(res) {
						console.log(res);
					},
					complete() {
						uni.navigateTo({
							url
						});
					}
				});
			},

			// 跳转商品详情
			togoods(item) {
				this.$api.togoods({
					id: item._id
				});
			},
			loginout() {
				uni.clearStorageSync('uni_id_token')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showpop = false
			}


		}
	};
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
		min-height: 100%;
	}

	.bgcolor {
		background: linear-gradient(to right, #3247D3, #1178F5);
		width: 100%;
	}

	.member-area {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}

	.vip-card-area {
		color: #f7d680;
		background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
	}

	.stats-area {
		.item {
			padding: 30rpx 0;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 6rpx;
		}
	}

	.order-area {
		.item {}

		.iconfont {
			position: relative;
			font-size: $font-lg + 8upx;

			.badge {
				right: initial;
			}
		}
	}

	.stats-area .item,
	.order-area .item {
		position: relative;
		font-size: $font-sm;
		color: $font-color-base;
		flex: 1;
	}

	.browsing-area {
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.log-out-btn {
		color: #fff;
	}
</style>